<div class="st-accordion" data-controller="accordion">
  <% metafields_by_definition = @product.metafields.index_by { |m| m.metafield_definition.id.to_s } %>
  <% block.preferred_metafield_definition_ids.each do |definition_id| %>
    <% metafield = metafields_by_definition[definition_id.to_s] %>
    <% next unless metafield %>
    <% next unless metafield.metafield_definition.available_on_front_end? %>
    
    <details class="product-metafield border-b border-default group" id="metafield_<%= metafield.id %>">
      <summary class="text-sm uppercase tracking-widest inline-flex w-full justify-between items-center py-4 cursor-pointer focus:outline-hidden">
        <span><%= metafield.name %></span>
        <span class="ml-2 transition-transform group-open:rotate-180">
          <%= render 'spree/shared/icons/chevron_down' %>
        </span>
      </summary>
      <%= render "spree/metafields/#{metafield.type.demodulize.underscore}", metafield: metafield %>
    </details>
  <% end %>
</div>
